import { defineComponent, watch } from 'vue';
import { events } from '../../utils/events.js';

export const colorComponent = defineComponent({
    props: {
        prop: {
            type: Object,
            default: () => {}
        }
    },
    setup(props) {
        watch(() => props.prop.value, () => events.emit('props'));

        return () => (
            <div class='colorComponent'>
                <div class='component_label'>{props.prop.label}</div>
                <input v-model={props.prop.value} class='colorInput' type="color" />
            </div>
        )
    }
})

export const progressComponent = defineComponent({
    props: {
        prop: {
            type: Object,
            default: () => {}
        }
    },
    setup(props) {
        watch(() => props.prop.value, () => events.emit('props'));

        return () => (
            <div class='progressComponent'>
                <div class='component_label'>{props.prop.label}</div>
                <div class="component_content">
                    {props.prop.value}
                    <input
                        v-model={props.prop.value}
                        max={props.prop.max}
                        min={props.prop.min}
                        class='progressInput'
                        type="range"
                    />
                </div>
            </div>
        )
    }
})

export const switchComponent = defineComponent({
    props: {
        prop: {
            type: Object,
            default: () => {}
        }
    },
    setup(props) {
        watch(() => props.prop.value, () => events.emit('props'));

        return () => (
            <div class='switchComponent'>
                <div class='component_label'>{props.prop.label}</div>
                <div class="component_content">
                    {props.prop.options.leftLabel}
                    <input
                        v-model={props.prop.value}
                        class='switchInput'
                        type="checkbox"
                    />
                    {props.prop.options.rightLabel} 
                </div>
            </div>
        )
    }
})

export const inputComponent = defineComponent({
    props: {
        prop: {
            type: Object,
            default: () => {}
        }
    },
    setup(props) {
        watch(() => props.prop.value, () => events.emit('props'));

        return () => (
            <div class='inputComponent'>
                <div class='component_label'>{props.prop.label}</div>
                <input v-model={props.prop.value} class='inputInput' type="text" />
            </div>
        )
    }
})

export const radioComponent = defineComponent({
    props: {
        prop: {
            type: Object,
            default: () => {}
        }
    },
    setup(props) {
        watch(() => props.prop.value, () => events.emit('props'));

        return () => (
            <div class='radioComponent'>
                <div class='component_label'>{props.prop.label}</div>
                <div class="component_content">
                    {
                        props.prop.options.map(item => {
                            return (
                                <div class="component_content_item">
                                    <input v-model={props.prop.value} value={item.value} class='radioInput' type="radio" />
                                    <span>{item.label}</span>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
        )
    }
})